<template>
  <a-modal :title="formTile + '颜色'" :visible="true" width="60%" :footer="null" @cancel="reset">
    <div class="main">
      <a-card>
        <a-form-model ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="rules">
          <a-form-model-item label="销售色" prop="mcid">
            <a-select v-model="form.mcid" placeholder="请选择销售色" show-search :disabled="disabled"
              @search="handleSearch" @change="handleChange" :filterOption="filterOption">
              <a-select-option v-for="(item) in backList" :key="item.code" :value="item.code" :title="item.name">
                {{ item.code }}-{{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="季节" prop="mcid">
            <a-select v-model="form.mcseason" placeholder="季节" show-search :filterOption="filterOption">
              <a-select-option v-for="(item) in seasonList" :key="item.code" :value="item.code" :title="item.name">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="印花色号">
            <a-select v-model="form.mcvc4" placeholder="印花色号" show-search :filterOption="filterOption">
              <a-select-option v-for="(item) in patternList" :key="item.colorId" :value="item.colorCode" :title="item.colorName">
                {{ item.colorName }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="备注">
            <a-input placeholder="请输入备注" type="textarea" v-model="form.mcmemo" />
          </a-form-model-item>
          <a-form-model-item>
            <a-row style="margin-top:10px">
              <a-col :span="16" :offset="18" class="info-action">
                <a-button :style="{ marginLeft: '8px' }" @click="reset">
                  重置
                </a-button>
                <a-button :style="{ marginLeft: '8px' }" type="primary" @click="onSubmit" :loading="loading">
                  保存
                </a-button>
              </a-col>
            </a-row>
          </a-form-model-item>
        </a-form-model>
      </a-card>
    </div>
  </a-modal>
</template>
  
<script>
import { postAction } from '@/api/manage'
import { seachColor, seachPatternColor,getDictChildList,sampleColorAdd,sampleColorUpdate } from '@api/material/index'

export default {
  components: {
  },

  props: {
    colorDetail: {
      type: Object,
      default: null,
      required: false,
    },
    sccode: {
      type: String,
      default: null,
      required: false,
    },
    patternCode: {
      type: String,
      default: null,
      required: false,
    },
    maxSeq:{
      type: Number,
      default: null,
      required: false,
    }
  },

  data() {
    return {
      seasonList:[],
      patternList: [],
      urlKey: 'basemgt-material/',
      labelCol: { span: 5 },
      wrapperCol: { span: 16 },
      backList: [],
      disabled: false,
      ifEdit:false,
      form: {
        mcid: undefined,
        mcname:'',
        mcseason:undefined,
        mcvc4:undefined,
        mcmemo:'',
        mcsx:0,
        mcvc1:'',
        mcinputor:'',
      },
      rules: {
        mcid: [{ required: true, message: '请输入销售色', trigger: 'blur' }],
        manufactorColorCode: [{ required: true, message: '请输入厂家色号', trigger: 'blur' }]
      },
      loading: false
    }
  },

  created() {
    const { colorDetail,patternCode ,sccode,maxSeq} = this.$props
    if(patternCode){
      this.getPatternList()
    }
    if(sccode){
      this.form.mcvc1 = sccode
    }
    if(maxSeq){
      console.log(maxSeq);
      this.form.mcsx = maxSeq
    }
    if (colorDetail) {
      this.formTile = '编辑'
      this.ifEdit = true
      this.form = colorDetail
      console.log(colorDetail);
    } else {
      this.formTile = '新增'
      this.ifEdit = false

    }
    this.handleSearch('')
    
  },
  mounted() {
    this.getDictChildList()
   },
   computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    }
  },
  methods: {
    async getDictChildList() {
        const params = {
          name: 'PRODUCT_COLORSEASON',
        }
        try {
          const res = await getDictChildList(params)
          if (res.code == 200) {
            this.seasonList = res.data
          } else {
            if (res.msg) {
              this.$message.error(res.msg)
            } else {
              this.$message.error('获取季节列表失败！')
            }
          }
        } catch (error) {
          this.$message.error('获取季节列表失败！')
        }
    },
    reset() {
      this.$refs.ruleForm.resetFields()
      this.$emit('closeColor')
    },
    async handleSearch(value) {
      const res = await seachColor({ keyWord: value })
      if (res.code == 200) {
        this.backList = res.data
      } else {
        if (res.msg) {
          this.$message.error(res.msg)
        } else {
          this.$message.error('获取颜色列表失败！')
        }
      }
    },
    async getPatternList() {
      const res = await seachPatternColor({ patternCode:this.patternCode})
      if (res.code == 200) {
        this.patternList = res.data
      } else {
        if (res.msg) {
          this.$message.error(res.msg)
        } else {
          this.$message.error('获取印花色列表失败！')
        }
      }
    },
    filterOption(input, option) {
      if (option && option.props && option.props.title) {
        return option.props.title === input || option.props.title.indexOf(input) !== -1
      } else {
        return true
      }
    },
    handleChange(value) {
      this.backList.map(item => {
        if (item.code == value) {
          this.form.mcname = item.name
        }
      })
    },

    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.submit()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    async submit() {
      const params = JSON.parse(JSON.stringify(this.form))
      params.mcinputor = this.userInfo.realname
      const paramsArr = []
      paramsArr.push(params)
      const res = this.ifEdit ? await sampleColorUpdate(params) : await sampleColorAdd(paramsArr)
      if (res.code == 200) {
        this.$message.success(this.ifEdit ?'更新成功！':'新增成功！')
        this.reset()
      } else {
        if (res.msg) {
          this.$message.error(res.msg)
        } else {
          this.$message.error('操作失败！')
        }
      }
    }
  }
}
</script>
<style scoped>
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}

.ml-20 {
  margin-left: 20px;
}

.dynamic-delete-button {
  cursor: pointer;
  position: absolute;
  right: -40px;
  top: -4px;
  font-size: 24px;
  color: #999;
  transition: all 0.3s;
}

.dynamic-delete-button:hover {
  color: #777;
}

.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
</style>